<template>
  <view class="page-time-coin">
    <view class="info">
      <view class="card">
        <view class="card-item">
          <text class="coin-type">时间币</text>
          <text class="money">0.00</text>
        </view>
        <view class="card-item">
          <view class="item">
            <text>暂存</text>
            <text>0</text>
          </view>
          <text>|</text>
          <view class="item">
            <text>待支付</text>
            <text>0</text>
          </view>
        </view>
        <view class="btn-view">
          <text class="btn">捐赠</text>
        </view>
      </view>
      <view class="btn-group">
        <view class="item">
          <icon type="success" size="48"></icon>
          <text>收支明细</text>
        </view>
        <view class="item">
          <icon type="success" size="48"></icon>
          <text>待支付记录</text>
        </view>
      </view>
    </view>
    <view class="info">
      <view class="header">
        <text>近期动帐</text>
      </view>
      <view class="line"></view>
      <view class="money-list">
		  <view class="money-item" v-for="item in moneyList" :key="item.id">
			  <view class="money-header">
				  <view class="money-title">{{item.title}}</view>
				  <view>{{item.money}}</view>
			  </view>
			  <view class="money-create">{{item.create}}</view>
			  <view class="money-line"></view>
		  </view>
	  </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
  	return {
  		param:{},
  		moneyList:[]
  	};
  },
  onLoad(){
	  this.getMoneyList()
  },
  methods:{
	  getMoneyList(){
		this.param.token = uni.getStorageSync("token");
		this.http.get({
			url: '/index.php/Wxapp/Money/getList',
			data: this.param
		}).then(resp => {
			this.moneyList = resp.data.list;
			console.log("积分商品：", this.moneyList)
		}).catch(err => {
			console.log("消息列表失败：", err)
		})
	  }
  }
}
</script>
<style lang="scss" scoped>
  .page-time-coin {
    height: 100vh;
    width: 100vw;
    background: #ccc;
  }
  .info {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    .card {
      width: 98%;
      height: 150px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      border-radius: 15px;
      background: linear-gradient(to right, #f84a00d9, #f9d423);
      color: #fff;
      .card-item {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .money {
          font-size: 26px;
        }
        .item {
          width: 40%;
          display: flex;
          justify-content: space-between;
        }
      }
      .btn-view {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        .btn {
          width: 100px;
          height: 30px;
          display: flex;
          justify-content: center;
          border: 1px solid #FFF;
          border-radius: 15px;
          line-height: 30px;
        }
      }
    }
    .btn-group {
      margin-top: 15px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .item {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }
    }
    .header {
      width: 100%;
      height: 24px;
      padding-left: 10px;
      line-height: 24px;
      border-left: 6px solid orange;
    }
    .line {
      width: 100%;
	  margin-top: 10rpx;
      height: 1px;
      border-bottom: 1px solid #eee;
    }
    .content {
      width: 100%;
      height: 200px;
    }
	
	.money-list {
		width: 100%;
		.money-item{
			height: auto;
			margin-top: 16rpx;
			padding: 6rpx;
			.money-header {
				display: flex;
				justify-content: space-between;
				.money-title{
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					justify-content: center;
				}
			}
			.money-create {
				color: #DCDCDC;
			}
			.money-line {
				width: 100%;
				height: 1px;
				border-bottom: 1px solid #eee;
			}
		}
	}
  }  
</style>